<script>
export default {
  name: 'x-tabbar',
  props: {
    height: {
      type: String,
      default: '50px',
    },
    fixed: {
      type: String,
      default: 'none',
    },
    value: {}
  },
  data () {
    return {
      myStyle: {
        height: this.height,
        'line-height': this.height,
      },
      myClass: {
        'x-tabbar-top': this.fixed === 'top',
        'x-tabbar-bottom': this.fixed === 'bottom'
      }
    }
  }
}
</script>
<template lang="pug">
.x-tabbar(:style="myStyle" :class="myClass")
  slot
</template>
<style lang="stylus" scoped>
.x-tabbar
  display flex
  width 100%
  height 50px
  line-height 50px
  &.x-tabbar-top
    position fixed
    top 0
    box-shadow 0 1px 3px #ccc
  &.x-tabbar-bottom
    position fixed
    bottom 0
    box-shadow 0 -1px 3px #ccc
</style>

